<template>
  <!--单引号可以写字符串 class加冒号 代表后边可以写js代码-->
  <div :class="'swiper-container ' + swipername">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>

    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'DetailSwiper',
  props: ['perview', 'swipername'],
  mounted () {
    // 先初始化组件，加载完成
    console.log('mounted')

    // eslint-disable-next-line no-new
    new Swiper('.' + this.swipername, {
      // loop: true,
      slidesPerView: this.perview, // 一页显示3个
      spaceBetween: 5, // 每页间隔30px
      freeMode: true, // 自由滑动模式
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }
}
</script>

<style scoped lang="scss">
.swiper-wrapper {
  img {
    width: 100%;
  }
}
</style>
